<template>
  <div class="region-point-switch" v-if="tab.length">
    <div
      v-for="(item, index) in tab"
      :key="index"
      :class="{ active: activeName === index }"
      @click="switchTab(item, index)"
    >
      {{ item }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
const monitoringStore = useMonitoringStore()
const permissions = localStorage.getItem('userInfo')
const tab = computed(() => {
  if (permissions.includes('*:*:*')) {
    return ['站点', '网格']
  } else {
    if (
      permissions.includes('actualMonitoring:station') &&
      permissions.includes('actualMonitoring:coordinate')
    ) {
      return ['站点', '网格']
    } else if (
      permissions.includes('actualMonitoring:station') &&
      !permissions.includes('actualMonitoring:coordinate')
    ) {
      return ['站点']
    } else if (
      !permissions.includes('actualMonitoring:station') &&
      permissions.includes('actualMonitoring:coordinate')
    ) {
      return ['网格']
    }
  }

  return []
})
const activeName = ref(0)
const switchTab = (name, index) => {
  activeName.value = index
  monitoringStore.sbGdCurrentSelect = name
  if (name == '网格') {
    monitoringStore.gdskjcCurrentSelect = 'RAIN'
    monitoringStore.NavActive = 'RAIN'
    monitoringStore.moduleVisible.wgModule = true
    monitoringStore.moduleVisible.zdModule = false
    monitoringStore.componentsVisible.wg = false
    monitoringStore.componentsVisible.sbt = true
    monitoringStore.bottomBarList = [
      {
        img: 'nav',
        imgA: 'navA',
        name: '气温',
        value: 'TEM'
      },
      {
        img: 'nav1',
        imgA: 'nav1A',
        name: '风',
        value: 'WIND'
      },
      {
        img: 'nav2',
        imgA: 'nav2A',
        name: '降水',
        value: 'RAIN'
      },
      {
        img: 'nav4',
        imgA: 'nav4A',
        name: '湿度',
        value: 'RH'
      }
    ]
  } else {
    monitoringStore.gdskjcCurrentSelect = 'none'
    monitoringStore.NavActive = ''
    monitoringStore.moduleVisible.zdModule = true
    monitoringStore.moduleVisible.wgModule = false
    monitoringStore.bottomBarList = undefined
  }
  useEventBus('handleInitCameraPosition').emit()
}
onMounted(() => {})
</script>
<style scoped lang="scss">
.region-point-switch {
  width: 394px;
  height: 47px;
  background: url(../images/switch.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  justify-content: center;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  div {
    width: 50%;
    text-align: center;
    line-height: 47px;
    color: #c3d5db;
    font-size: 22px;
    text-shadow: 0px 0px 3px #03fdff;
    &.active {
      color: #ffffff;
      text-shadow: 0px 0px 3px #04fdff;
    }
  }
}
</style>
